import React, { useCallback } from "react"

import { Field_FormSave, Field_name_id } from "@/components/utils/field.list"

import { FormProps } from "@/components/modal/form.modal"
import adminMangerService from "@/services/admin.manger.service"
import adminRulesService from "@/services/admin.rules.service"
import { FormRender } from "@whzhuke/antd"
import useForm from "antd/es/form/hooks/useForm"
import { useFetch } from "@whzhuke/usehook"
import baseSystem from "@/services/base.system"
import crypto from "crypto-js"

interface Props {
  values?: any
}
export const EditManger: React.FC<Props & FormProps> = props => {
  const { values, onDone } = props
  const [form] = useForm<any>()
  const onFinish = useCallback(data => {
    const payload = { ...data }
    if (payload.password) {
      payload.password = crypto.MD5(payload.password).toString()
    }
    if (payload.rePassword) {
      payload.rePassword = crypto.MD5(payload.rePassword).toString()
    }
    adminMangerService[values ? "edit" : "add"](payload).then(res => {
      onDone?.()
    })
  }, [])
  const [{ data: list }] = useFetch(adminRulesService.list, [{ pageSize: 99, pageNum: 0 }])

  const [{ data: details }] = values?.id ? useFetch(adminMangerService.item, [{ id: values?.id }]) : [{ data: null }]
  return (
    <FormRender
      form={form}
      initialValues={
        details
          ? {
              ...details
            }
          : {
              active: !0
            }
      }
      layout="horizontal"
      preserve={false}
      onFinish={onFinish}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ width: 600 }}
      fieldList={[
        values ? Field_name_id : undefined,
        {
          fieldType: "input",
          formItemConfig: { required: !0, name: "username", label: "账号" },
          config: { placeholder: "输入用户名", disabled: !!values }
        },
        {
          fieldType: "input",
          formItemConfig: {
            required: !values,
            name: "password",
            label: "密码",
            hidden: !!values
          },
          config: { placeholder: "请输入密码", type: "password" }
        },
        {
          fieldType: "input",
          formItemConfig: {
            required: !values,
            name: "rePassword",
            label: "确认密码",
            hidden: !!values
          },
          config: { placeholder: "请输入确认密码", type: "password" }
        },
        {
          fieldType: "input",
          formItemConfig: { name: "telephone", label: "手机号码" },
          config: {
            placeholder: "请输入手机号码",
            type: "phone"
          }
        },
        {
          fieldType: "input",
          formItemConfig: { name: "realName", label: "真实姓名" },
          config: {
            placeholder: "请输入真实姓名"
          }
        },
        {
          fieldType: "select",
          formItemConfig: { name: "roleId", label: "所属角色", required: !0 },
          config: {
            placeholder: "请选择所属角色",
            options: list.list.map((v: { roleName: any; id: any }) => ({ label: v.roleName, value: v.id }))
          }
        },
        {
          fieldType: "radioGroup",
          formItemConfig: { required: !0, name: "active", label: "状态" },
          config: {
            optionType: "button",
            options: [
              {
                label: "启用",
                value: true
              },
              {
                label: "禁用",
                value: false
              }
            ]
          }
        },
        { ...Field_FormSave, formItemConfig: { wrapperCol: { offset: 8, span: 16 } } }
      ]}
      autoComplete="off"
    />
  )
}
